{extend name="layout/main-block" /}

{block name="style"}
<style type="text/css">
    #zige{
        border:1px solid #BFBFBF;
        box-shadow:0px 0px 10px 5px #aaa ;
        width: 40%;
    }

    #zeren{
        border:1px solid #BFBFBF;
        box-shadow:0px 0px 10px 5px #aaa ;
        width: 40%;
    }
</style>
{/block}
<!-- main content start -->
{block name="content"}
<section id="main-content">
    <section class="wrapper">
        <div class="row">
            <ol class="breadcrumb">
                <li class="h4"><a href="">加入我们</a></li>
            </ol>
        </div>
        <div class="row" style="margin-bottom: 20px;margin-left: 20px">
            <a href="{:url('joinus/joinus_create')}" class="btn btn-primary" role="button">添加内容</a>
        </div>
        <div id="main" class="row content-main">
            <div id="join" class="col-sm-12">
                <form action="">
                    <table class="table table-striped">
                        <tr>
                            <th>id</th>
                            <th>标题中文</th>
                            <th>标题英文</th>
                            <th>任职地区中文</th>
                            <th>任职地区英文</th>
                            <th>操作</th>
                        </tr>
                        {volist name="joinus" id="v" empty="$empty" }
                        <tr>
                            <td>{$v.joinus_id}</td>
                            <td>{$v.title_cn |mb_substr=0,10}</td>
                            <td>{$v.title_en |mb_substr=0,10}</td>
                            <td>{$v.location_cn |mb_substr=0,10}</td>
                            <td>{$v.location_en |mb_substr=0,10}</td>
                            <td class="operation">
                                <a class="btn btn-info btn-xs" href="{:url('joinus/joinus_update', ['id'=>$v.joinus_id])}"><i class="glyphicon glyphicon-edit"></i>修改</a>
                                <a class="btn btn-primary btn-xs qu" idname="qu" p_id="{$v.joinus_id}" ><i class="glyphicon glyphicon-edit "></i>资格</a>
                                <a class="btn btn-warning btn-xs re" idname="re" p_id="{$v.joinus_id}" ><i class="glyphicon glyphicon-edit "></i>责任</a>
                                <a class="btn btn-danger btn-xs" href="{:url('joinus/joinus_delete', ['id'=>$v.joinus_id])}" onclick="return confirm('确定要删除吗？');"><i class="glyphicon glyphicon-remove"></i>删除</a>
                            </td>
                        </tr>
                        {/volist}
                    </table>
                </form>
            </div>

            <section id="zige" class="col-sm-6" style="display: none" >
                <div style="float: right">
                    <a id="closezg" class="btn btn-danger btn-xs" style="margin-top: 5px;"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
                <div class="row">
                    <ol class="breadcrumb">
                        <li class="h4"><span class="right-name"></span>资格</li>
                    </ol>
                </div>
                <div class="row" style="margin-bottom: 20px;margin-left: 20px">
                    <button  id="addzg" class="btn btn-success"  style="font-size: 10px">添加资格</button>
                </div>
                <div id="createzg" style="display: none">
                    <form class="form-horizontal" action="" enctype="multipart/form-data" method="post">
                        <div class="form-group" >
                            <label for="inputQualification_cn" class="col-sm-2 control-label">资格中文</label>
                            <div class="col-sm-9 col-md-8  col-lg-9">
                                <input type="text" name="qualification_cn" class="form-control" id="inputQualification_cn" placeholder="资格中文...">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputQualification_en" class="col-sm-2 control-label">资格英文</label>
                            <div class="col-sm-9 col-md-8  col-lg-9">
                                <input type="text" name="qualification_en" class="form-control" id="inputQualification_en" placeholder="资格英文...">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9">
                                <button id="tjzg" type="submit" class="btn btn-primary" style="font-size: 10px">提 交</button>
                            </div>
                        </div>
                    </form>
                </div>


                <div class="row content-main">
                    <div class="">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>资格中文</th>
                                        <th>资格英文</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="tb">
                                </tbody>
                            </table>
                    </div>
                </div>
            </section>

            <section id="zeren" class="col-sm-6" style="display: none" >
                <div style="float: right">
                    <a id="closezr" class="btn btn-danger btn-xs" style="margin-top: 5px;"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
                <div class="row">
                    <ol class="breadcrumb">
                        <li class="h4"><span class="right-name"></span>责任</li>
                    </ol>
                </div>
                <div class="row" style="margin-bottom: 20px;margin-left: 20px">
                    <button  id="addzr" class="btn btn-success"  style="font-size: 10px">添加责任</button>
                </div>
                <div id="createzr" style="display: none">
                    <form class="form-horizontal" action="" enctype="multipart/form-data" method="post">
                        <div class="form-group" >
                            <label for="inputResponsiblities_cn" class="col-sm-2 control-label">责任中文</label>
                            <div class="col-sm-9 col-md-8  col-lg-9">
                                <input type="text" name="responsiblities_cn" class="form-control" id="inputResponsiblities_cn" placeholder="责任中文...">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputResponsiblities_en" class="col-sm-2 control-label">责任英文</label>
                            <div class="col-sm-9 col-md-8  col-lg-9">
                                <input type="text" name="responsiblities_en" class="form-control" id="inputResponsiblities_en" placeholder="责任英文...">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9">
                                <button id="tjzr" type="submit" class="btn btn-primary" style="font-size: 10px">提 交</button>
                            </div>
                        </div>
                    </form>
                </div>


                <div class="row content-main">
                    <div class="">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>责任中文</th>
                                <th>责任英文</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="zr">
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </div>
        {$page}
    </section>
</section>
{/block}

{block name="javascript"}
<script>
    $(function () {
        var p_id = 0;
        /*
        * 资格有关js
        *
        *
        * */
        //点击事件触发资格列表

        $("#main").on("click",".qu", function(event){
            $("#join").attr("class","col-sm-6");
            $("#zige").show();
            event.preventDefault();
        });

        //资格列表
        $(".qu").click(function(){
             p_id = $(this).attr("p_id");
           // console.log(p_id);
            var idname = $(this).attr("idname");
            var data_click = $(this).data("click");
            //判断点击后不重复循环列表
            if(data_click){
                return;
            }else{
                $("#tb").html("");
                $(".qu").data('click',null);
                $(this).data('click','alreadyclicked');
                datarefresh(p_id,idname);
            }
        });

        //提交资格数据display表格
        $("#tjzg").click(function(event){
            $("#createzg").hide();
            event.preventDefault();
        });

        //数据刷新
        function datarefresh(p_id,idname){
            console.log(idname);
            $.ajax({
                //async: false,//设置成同步
                type:'POST',
                url:'index',
                data:{'p_id' : p_id,'idname':idname},
                dataType:'json',
                success:function(data){
                    //console.log("success",data);
                    TableDataFill(data);
                },
                error:function (data){
                   // alert(data);
                    console.log(data);
                }
            })
        };

        //数据填充
         function TableDataFill(data){
             //console.log(data);
             $("#addzg").data("p_id",p_id);

             for(var v of data.qu) {
                 //console.log(v,data.qu.data[v]);
                 RenderTR(v);
             }
         };
//循环新建和修改的列表数据
         function RenderTR(v){
             $('#tb').append(
                 "<tr class='zg-"+v.qu_id+"'>" +
                 "<td>"+v.qu_id+"</td>" +
                 "<td class='cn-"+v.qu_id+"' title=\""+v.qualification_cn+"\">"+v.quname_cn+"</td>" +
                 "<td class='en-"+v.qu_id+"' title=\""+v.qualification_en+"\">"+v.quname_en+"</td>" +
                 "<td class=\"operation\">" +
                 "<a class=\"btn btn-info btn-xs editsub\" qu_id=\""+v.qu_id+"\" href=\"javascript:void(0)\">" +
                 "<i class=\"glyphicon glyphicon-edit\" ></i>修改</a>" +
                 "<a class=\"btn btn-danger btn-xs deletesub\" qu_id=\""+v.qu_id+"\" >" +
                 "<i class=\"glyphicon glyphicon-remove\"></i>删除</a>" +
                 "</td>" +
                 "</tr>"
             );
         }

        //添加资格
        $("#addzg").click(function(event){
            $("#createzg").show();
            $("#tjzg").data("p_id",$(this).data("p_id"));
            event.preventDefault();
        });

        //添加 提交资格子类的操作
        $("#tjzg").click(function(){
            var qualification_cn = $("#inputQualification_cn").val();
            var qualification_en = $("#inputQualification_en").val();
            data = {
                qualification_cn: qualification_cn,
                qualification_en: qualification_en,
                quname_cn: qualification_cn.substr(0,7),
                quname_en: qualification_en.substr(0,20)
            };
            if($(this).data("p_id")){
                data.p_id = $(this).data("p_id");
                subrefresh(data);
            }else if($(this).data("qu_id")){
                data.qu_id = $(this).data("qu_id");
                subedit(data);
            }

        });

        //清空资格提交的内容
        function clearzg(){
            $("#createzg form")[0].reset();
        }

        //传递数据给控制器 新建资格
        function subrefresh(data){
            //console.log(p_id);
            $.ajax({
                //async: false,//设置成同步
                type:'POST',
                url:'qu_create',
                data:data,
                dataType:'json',
                success:function(res){
                    if(res.code==2000){
                        console.log(res);
                        $("#createzg").hide();
                        data.qu_id = res.data.id;
                        RenderTR(data);
                        clearzg();
                    }else{
                        //alert(res.message);
                        clearzg();
                        console.log(res);
                    }

                },
                error:function (XMLHttpRequest, textStatus, errorThrown){
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                }
            })
        };

        //修改资格
        $("#tb").on('click', '.editsub', function(event){
            var id = $(this).attr("qu_id");
            subedit({qu_id:id});
            event.preventDefault();
        });

        //ajax数据刷新资格
        function subedit(data){
            $.ajax({
                //async: false,//设置成同步
                type:'POST',
                url:'qu_update',
                dataType:'json',
                data:data,
                success:function(res){
                    if(res.qualification_cn){
                        console.log(res);
                        $("#createzg").show();
                        $("#inputQualification_cn").val(res.qualification_cn);
                        $("#inputQualification_en").val(res.qualification_en);
                        //给tjzg挂载数据
                        $("#tjzg").data("qu_id",data.qu_id);
                        //
                    }else{
                        $("#createzg").hide();
                        $(".cn-"+data.qu_id).html(data.quname_cn);
                        $(".en-"+data.qu_id).html(data.quname_en);
                        clearzg();
                    }

                },
                error:function (XMLHttpRequest, textStatus, errorThrown){
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                }
            })
        }

        //删除资格数据
        $("#tb").on('click', '.deletesub', function(event){
            event.preventDefault();
            if(confirm('确定要删除吗？')){
                var id = $(this).attr("qu_id");
                console.log(id);
                subdelete({qu_id:id});
            }
        });

        //提交ajax删除数据
        function subdelete(data){
            $.ajax({
                //async: false,//设置成同步
                type:'POST',
                url:'qu_delete',
                dataType:'json',
                data:data,
                success:function(res){
                    $('.zg-'+data.qu_id).remove();
                },
                error:function (XMLHttpRequest, textStatus, errorThrown){
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                }
            })
        }

        //关闭整个对话框
        $("#closezg").click(function (){
            $("#zige").hide();
            $("#createzg").hide();
            $("#join").attr("class","col-sm-12");
        });



        /*
        * 责任有关js
        *
        *
        * */

        //点击事件触发责任列表
        $("#main").on("click",".re", function(event){
            $("#join").attr("class","col-sm-6");
            $("#zeren").show();
            event.preventDefault();
        });

        //责任列表
        $(".re").click(function(){
             p_id = $(this).attr("p_id");
            var idname = $(this).attr("idname");
            var data_click = $(this).data("click");
            //判断点击后不重复循环列表
            if(data_click){
                return;
            }else{
                $("#zr").html("");
                $(".re").data('click',null);
                $(this).data('click','alreadyclicked');
                datarefreshzr(p_id,idname);
            }
        });

        //提交责任数据display表格
        $("#tjzr").click(function(event){
            $("#createzr").hide();
            event.preventDefault();
        });

        //数据刷新
        function datarefreshzr(p_id,idname){
            //console.log(p_id);
            $.ajax({
                //async: false,//设置成同步
                type:'POST',
                url:'index',
                data:{'p_id' : p_id,'idname':idname},
                dataType:'json',
                success:function(data){
                    console.log(data);
                    TableDataFillzr(data);
                },
                error:function (data){
                  //  alert(data);
                    console.log(data);
                }
            })
        };

        //数据填充
        function TableDataFillzr(data){
            $("#addzr").data("p_id",p_id);
            for(var v of data.re) {
                //console.log(v,data.qu.data[v]);
                RenderTRzr(v);
            }
        };

        function RenderTRzr(v){
            $('#zr').append(
                "<tr class='zr-"+v.re_id+"'>" +
                "<td>"+v.re_id+"</td>" +
                "<td class='cn-"+v.re_id+"' title=\""+v.responsiblities_cn+"\">"+v.rename_cn+"</td>" +
                "<td class='en-"+v.re_id+"' title=\""+v.responsiblities_en+"\">"+v.rename_en+"</td>" +
                "<td class=\"operation\">" +
                "<a class=\"btn btn-info btn-xs editsubzr\" re_id=\""+v.re_id+"\" href=\"javascript:void(0)\">" +
                "<i class=\"glyphicon glyphicon-edit\" ></i>修改</a>" +
                "<a class=\"btn btn-danger btn-xs deletesubzr\" re_id=\""+v.re_id+"\"  >" +
                "<i class=\"glyphicon glyphicon-remove\"></i>删除</a>" +
                "</td>" +
                "</tr>"
            );
        }

        //添加责任 显示html 并且带入p_id给后台
        $("#addzr").click(function(event){
            $("#createzr").show();
            $("#tjzr").data("p_id",$(this).data("p_id"));
            event.preventDefault();
        });

        //添加 提交资格子类的操作
        $("#tjzr").click(function(){
            var responsiblities_cn = $("#inputResponsiblities_cn").val();
            var responsiblities_en = $("#inputResponsiblities_en").val();
            data = {
                responsiblities_cn: responsiblities_cn,
                responsiblities_en: responsiblities_en,
                rename_cn: responsiblities_cn.substr(0,7),
                rename_en: responsiblities_en.substr(0,20)
            };
            console.log(responsiblities_cn);
            if($(this).data("p_id")){
                data.p_id = $(this).data("p_id");
                subrefreshzr(data);
            }else if($(this).data("re_id")){
                data.re_id = $(this).data("re_id");
                subeditzr(data);
            }

        });
        //清空责任提交的内容
        function clearzr(){
            $("#createzr form")[0].reset();
        }

        //传递数据给控制器
        function subrefreshzr(data){
            //console.log(p_id);
            $.ajax({
                //async: false,//设置成同步
                type:'POST',
                url:'re_create',
                data:data,
                dataType:'json',
                success:function(res){
                    if(res.code==2000){
                        console.log(res);
                        $("#createzr").hide();
                        data.re_id = res.data.id;
                        //console.log(res.data.id);
                        RenderTRzr(data);
                        //添加完成后清空表单
                        clearzr();
                    }else{
                        //添加完成后清空表单
                        clearzr();
                       // alert(res.message);
                        console.log("res",res);
                    }
                },
                error:function (XMLHttpRequest, textStatus, errorThrown){
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                }
            })
        };

        //修改责任
        $("#zr").on('click', '.editsubzr', function(event){
            var id = $(this).attr("re_id");
            subeditzr({re_id:id});
            event.preventDefault();
        });

        function subeditzr(data){
           console.log(data);
            $.ajax({
                //async: false,//设置成同步
                type:'POST',
                url:'re_update',
                dataType:'json',
                data:data,
                success:function(res){
                    if(res.responsiblities_cn){
                        console.log(res);
                        $("#createzr").show();
                        $("#inputResponsiblities_cn").val(res.responsiblities_cn);
                        $("#inputResponsiblities_en").val(res.responsiblities_en);
                        //给tjzr挂载数据
                        $("#tjzr").data("re_id",data.re_id);
                    }else{
                        $("#createzr").hide();
                        $(".cn-"+data.re_id).html(data.rename_cn);
                        $(".en-"+data.re_id).html(data.rename_en);
                        //添加完成后清空表单
                        clearzr();
                    }

                },
                error:function (XMLHttpRequest, textStatus, errorThrown){
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                }
            })
        }

        //删除责任数据
        $("#zr").on('click', '.deletesubzr', function(event){
            event.preventDefault();
            if(confirm('确定要删除吗？')){
                var id = $(this).attr("re_id");
                console.log(id);
                subdeletezr({re_id:id});
            }
        });

        //提交ajax删除数据
        function subdeletezr(data){
            console.log(222);
            $.ajax({
                //async: false,//设置成同步
                type:'POST',
                url:'re_delete',
                dataType:'json',
                data:data,
                success:function(res){
                    $('.zr-'+data.re_id).remove();
                },
                error:function (XMLHttpRequest, textStatus, errorThrown){
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                }
            })
        }

        //关闭整个对话框
        $("#closezr").click(function (){
            $("#zeren").hide();
            $("#createzr").hide();
            $("#join").attr("class","col-sm-12");
        });
    });
</script>
{/block}